
<template>
  <!-- deptDialog文件 封装的表单 -->
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-form-item label="部门名称" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="部门编码" prop="code">
        <el-input v-model="form.code" />
      </el-form-item>
      <el-form-item label="部门负责人" prop="manager">
        <el-select
          v-model="form.manager"
          placeholder="请选择"
        >
          <el-option
            v-for="obj in managerlist"
            :key="obj.id"
            :label="obj.username"
            :value="obj.username"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="部门介绍" prop="introduce">
        <el-input v-model="form.introduce" type="textarea" />
      </el-form-item>

      <el-button type="primary" @click.native="onSubmit">确定</el-button>
      <el-button @click.native="hidefn">取消</el-button>

    </el-form>
  </div>
</template>

<script>
import { getEmployeeSimple, addDepartments, getDepartmentsDetil, editDepartments } from '@/api/departments'// addDepartments添加子部门接口   editDepartments
export default {
  props: {
    parentId: {
      type: [Number, String],
      required: true
    },
    iseidt: {
      type: Boolean,
      default: false
    },
    originlist: {
      type: Array,
      required: true
    }
  },
  data() {
    // 自定义验证函数
    var validatecode = (rule, value, callback) => {
      let secondcodelist = this.originlist.map(obj => obj.code)
      // 编辑部门的时候验证
      if (this.iseidt) {
        secondcodelist = this.originlist.filter(obj => obj.id !== this.parentId).map(obj => obj.code)
      }
      secondcodelist.includes(value) ? callback(new Error(`编码${value}重复`)) : callback()
    }
    var validatename = (rule, value, callback) => {
      // 添加部门的时候验证
      let list = this.originlist.filter((obj) => obj.pid === this.parentId).map(item => item.name)
      if (this.iseidt) {
        // 找到父级的id定义为pid 找pid相同的,并且id 和回填id 不一样的数组
        const dept = this.originlist.find(obj => obj.id === this.parentId)
        // pid
        const pid = dept.pid
        list = this.originlist.filter((obj) => obj.pid === pid && obj.id !== this.parentId).map(item => item.name)
        // 同级部门this.parentId
      }
      list.includes(value) ? callback(new Error(`部门名称${value}重复`)) : callback()
    }
    return {
      // 表单内各项信息
      form: {
        name: '',
        manager: '',
        code: '',
        introduce: ''
      },
      // 校验的基本规则
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在1-50个字符', trigger: 'blur' },
          { validator: validatename, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请选择负责人', trigger: 'change' }// 负责人的触发时间
        ],
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 1, max: 50, message: '长度在1-50个字符', trigger: 'blur' },
          { validator: validatecode, trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 300, message: '长度在1-300个字符', trigger: 'blur' }
        ]
      },
      // 管理员列表
      managerlist: []

    }
  },
  created() {
    // console.log(this.iseidt)
    this.getEmployeeSimple()// 获取负责人列表
    this.getDepartmentsDetil()// 如果是编辑部门信息,进行数据回填
  },
  methods: {
    // 编辑完成点击确定 进行兜底验证,验证通过进行操作
    onSubmit() {
      this.$refs['form'].validate((bool) => {
        if (bool) { // 验证通过
          this.iseidt ? this.editDepartments() : this.addDepartments()
        }
        this.resetForm()
      })
    },
    // 获取负责人列表
    async getEmployeeSimple() {
      const res = await getEmployeeSimple()
      this.managerlist = res.data
    },
    // 添加新部门
    async addDepartments() {
      await addDepartments({ ...this.form, pid: this.parentId })
      this.$emit('updialogVisible')
      this.$message.success('添加部门成功')
    },
    // 编辑新部门--数据回填
    async getDepartmentsDetil() {
      if (this.iseidt) {
        const res = await getDepartmentsDetil(this.parentId)
        this.form = res.data
      }
    },
    // 编辑部门信息
    async editDepartments() {
      await editDepartments(this.parentId, this.form)
      this.$emit('updialogVisible')
      this.$message.success('修改部门成功')
    },
    // 点击取消
    hidefn() {
      // 点击取消后,清空表单验证
      this.resetForm()
      this.$emit('close')
    },
    // 清空表单
    resetForm() {
      this.$refs.form.resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select{
    width: 100%;
}

</style>
